<include file="public:header"/>
<include file="public:left"/>
<style>
    .add_img .img_case{width: 100px;height: 100px;border:1px solid #000;margin: 0 10px 10px 0;}
    .add_img .img_case img{width: 100%;height:100%;}
    .add_img .img_case:last-child .ld_close{display:none}
    .add_img{display: flex;flex-wrap:wrap;margin: 15px 0 0 120px}
    #param-items tr td{margin-top: 10px;}
    .table{margin-left: 60px;margin-top: 10px;}
    .table tr td{min-width: 120px;}
</style>
	<form  method="post" enctype="multipart/form-data" id="brandForm">
		<input type="hidden" name="id" value="{$data.id}" />
     <section>
      <h2><strong>组合套餐</strong><a style="float: right" href="javascript:void(0)" onclick="history.go(-1)">返回上一页</a></h2>
      <ul class="ulColumn2">
          <li>
              <span class="item_name" style="width:120px;">标题：</span>
              <input type="text" class="textbox textbox_295" name="title" value="{$data.title}"/>
          </li>
       <li>
        <span class="item_name" style="width:120px;">主图：</span>
        <input type="file" name="image" class="textbox textbox_295"/>
           <if condition="$data['image']"><img height="50" src="__STATIC__/uploads/{$data.image}" class="photoup" /> </if>
       </li>
          <li>
              <span class="item_name" style="width:120px;">其他图：</span>

              <div class="add_img" >
                  <if condition="$data['images']">
                      <volist name="data.images" id="vo" key="k">
                          <div class="img_case" style="position: relative">
                              <div class="ld_close" style="border-radius: 100px;padding:3px 5px 3px 5px;border: 1px solid red;background: red;color: #fff;position: absolute;z-index: 9999;top:-8px;right: -5px">
                                  x
                              </div>
                              <img src="__STATIC__/uploads/{$vo}" class="photoup" />
                              <input type="hidden" name="photo[]" value="{$vo}"/>
                          </div>
                      </volist>

                  </if>
                  <div class="img_case" style="position: relative">
                      <img src="__STATIC__/admin/images/add.png" class="photoup" />
                      <input type="file" name="photoname[]" class="photoname" style="display:none;"/>
                  </div>
              </div>
          </li>
            <input type="hidden" name="type"  value="{$type}"/>
          <li>
              <span class="item_name" style="width:120px;">原价：</span>
              <input type="number" class="textbox textbox_295" name="oprice" value="{$data.oprice}"/>元
          </li>
          <li>
              <span class="item_name" style="width:120px;">价格：</span>
              <input type="number" class="textbox textbox_295" name="price" value="{$data.price}"/>元
          </li>
          <li>
              <span class="item_name" style="width:120px;">搭配：</span>   <a href="javascript:;" id='add-option' onclick="addParam2()" style="margin-top:10px;" class="btn btn-primary"  title="添加"><i class='fa fa-plus'></i> 添加</a>

              <table class="table" cellspacing="100" style="margin-left: 120px" >
              <tbody id="option-items" >
              <tr>
                  <td style="width:100px;">排序操作 </td>
                  <td>套餐服务</td>
                  <td>数量</td>
              </tr>
              <volist name="data.option" id="vo">
              <tr>
                  <td style="width:100px;">
                      <a href="javascript:;" class="fa fa-move" title="拖动调整此显示顺序">移动</a>&nbsp;
                      <a href="javascript:;" onclick="deleteParam1(this)"  style="margin-top:10px;" title="删除">删除</a>
                  </td>
                  <td>
                      <select name="ids[]" style="width:100%;height: 40px"  class="textbox textbox_295" >
                          <volist name="package" id="do">
                          <option value="{$do.id}" <if condition="$vo['id'] eq $do['id']">selected</if> >{$do.title}</option>
                          </volist>
                      </select>
                  </td>
                  <td>
                      <input name="num[]" type="number"  style="width:100%"  class="textbox textbox_295" value="{$vo.num}"/>
                  </td>
              </tr>
              </volist>
              </tbody>
              </table>
         </li>
          <li>
              <span class="item_name" style="width:120px;">属性：</span>   <a href="javascript:;" id='add-param' onclick="add2()" style="margin-top:10px;" class="btn btn-primary"  title="添加"><i class='fa fa-plus'></i> 添加</a>
              <table style="margin-left: 120px;margin-top: 10px;" cellspacing="100" >
                  <tbody id="param-items" >
                  <volist name="data.param" id="vo">
                      <tr>
                          <td style="width:100px;">
                              <a href="javascript:;" class="fa fa-move" title="拖动调整此显示顺序">移动</a>&nbsp;
                              <a href="javascript:;" onclick="delete1(this)"  style="margin-top:10px;" title="删除">删除</a>
                          </td>
                          <td>
                              <input name="key[]" type="text"  style="width:100%"  class="textbox textbox_295" value="{$vo.key}"/>
                          </td>
                          <td>
                              <input name="param[]" type="text"  style="width:100%"  class="textbox textbox_295" value="{$vo.value}"/>
                          </td>
                      </tr>
                  </volist>
                  </tbody>
              </table>
          </li>
          <li style="height:auto;">  <span class="item_name" style="width:120px;">开始日期</span>
          <label class="single_selection">
              <input type="text" class="textbox textbox_295" name="start_date" id="start_date" placeholder="开始日期" value="{$data['start_date']}"/>
          </label>
              到期到期
              <label class="single_selection">
                  <input type="text" class="textbox textbox_295" name="end_date" id="end_date" placeholder="到期到期" value="{$data['end_date']}"/>
              </label>
          </li>
          <li>
              <span class="item_name" style="width:120px;">排序：</span>
              <input type="text" class="textbox textbox_295" name="sort" value="{$data.sort}"/>
          </li>
          <li>
              <span class="item_name" style="width:120px;">状态：</span>
              <label><input type="radio" name="status" <if condition="$data['status'] eq 0"> checked</if> value="0"/>下架</label>
              <label><input type="radio" name="status" <if condition="$data['status'] eq 1"> checked</if> value="1"/>上架</label>
          </li>

          <li style="height:auto;">
              <span class="item_name" style="width:130px;">简介：</span>
              <input name="des[]"<if condition="isset($data['des'])"> value="{$data['des'][0]}"</if> >
              <input name="des[]"<if condition="isset($data['des'])">  value="{$data['des'][1]}"</if> >
              <input name="des[]"<if condition="isset($data['des'])">  value="{$data['des'][2]}"</if> >
          </li>
          <li style="height:auto;">
              <span class="item_name" style="width:120px;">内容：</span>
              <script id="editor" name="content" type="text/plain" style="width:700px;height:300px;margin-left:125px; margin-top:-12px;">{$data['content']|htmlspecialchars_decode}</script>
          </li>
       <li>
        <span class="item_name" style="width:120px;"></span>
         <input type="submit" class="link_btn" value="提交"/>
       </li>
      </ul>
     </section>
	 </form>
<script type="text/javascript" src="__STATIC__/admin/js/jquery-ui-1.10.3.min.js"></script>
<script type="text/javascript" src='__STATIC__/admin/js/laydate/laydate.js'></script>
<script type="text/javascript">

    $(function() {
        $("#param-items").sortable({handle: '.fa-move'});
        $("#option-items").sortable({handle: '.fa-move'});
        laydate({
            elem: '#start_date', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
            format: 'YYYY-MM-DD',
            istime: true,
            event: 'focus' //响应事件。如果没有传入event，则按照默认的click
        });
        laydate({
            elem: '#end_date', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
            format: 'YYYY-MM-DD',
            istime: true,
            event: 'focus' //响应事件。如果没有传入event，则按照默认的click
        });
    })
    function addParam2() {
        $.ajax({
            "url": "{:url('goods/posttpl')}",
            data:{type:'{$type}'},
            success: function(data) {
                $('#option-items').append(data);
            }
        });
        return;
    }
    //
    function deleteParam1(o) {
        $.ajax({
            "url": "{:url('goods/posttpl')}",
            success: function(data) {
                $(o).parent().parent().remove();
            }
        });
        return;

    }

    function add2() {
        $.ajax({
            "url": "{:url('goods/tpl')}",
            data:{type:'{$type}'},
            success: function(data) {
                $('#param-items').append(data);
            }
        });
        return;
    }
    //
    function delete1(o) {
        $.ajax({
            "url": "{:url('goods/tpl')}",
            success: function(data) {
                $(o).parent().parent().remove();
            }
        });
        return;

    }
    function PreviewImage(imgFile) {

        var filextension = imgFile.value.substring(imgFile.value.lastIndexOf("."), imgFile.value.length);
        filextension = filextension.toLowerCase();
        if ((filextension != '.jpg') && (filextension != '.gif')
                && (filextension != '.jpeg') && (filextension != '.png')
                && (filextension != '.bmp')) {
            alert("对不起，系统仅支持标准格式的照片，请您调整格式后重新上传，谢谢 !");
            imgFile.focus();
        } else {
            var path;
            path = window.URL.createObjectURL(imgFile.files[0]);// FF 7.0以上
            $(imgFile).parent(".img_case").append('<div class="ld_close" style="border-radius: 100px;padding:3px 5px 3px 5px;border: 1px solid red;background: red;color: #fff;position: absolute;z-index: 9999;top:-8px;right: -5px">x</div>');

            $(imgFile).siblings("img").attr("src",path);
            //   alert($(imgFile).parent(".img_case").html());
            $(".add_img").append('<div class="img_case"  style="position: relative"><div class="ld_close" style="border-radius: 100px;padding:3px 5px 3px 5px;border: 1px solid red;background: red;color: #fff;position: absolute;z-index: 9999;top:-8px;right: -5px">x</div> <img src="__STATIC__/admin/images/add.png" class="photoup" /><input type="file" name="photoname[]" class="photoname" style="display:none;"/></div>');
        }
    }
    $(document).on("change",'.photoname',function(){
        PreviewImage(this);
    });
    //上传图片
    $(document).on("click",'.photoup',function(){
        $(this).siblings("input").trigger("click");
    });
    //删除图片
    $(document).on("click",'.ld_close',function(){
        if(confirm('确定删除图片吗？')){
            $(this).parent('.img_case').remove()
        }
    });



    //实例化编辑器
    //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
    var ue = UE.getEditor('editor');

    function isFocus(e) {
        alert(UE.getEditor('editor').isFocus());
        UE.dom.domUtils.preventDefault(e)
    }

    function setblur(e) {
        UE.getEditor('editor').blur();
        UE.dom.domUtils.preventDefault(e)
    }

    function insertHtml() {
        var value = prompt('插入html代码', '');
        UE.getEditor('editor').execCommand('insertHtml', value)
    }

    function createEditor() {
        enableBtn();
        UE.getEditor('editor');
    }
</script>
 </div>
</section>
</body>
</html>
